<template>
	<view class="uni-flex uni-flex-item uni-column">
		<view class="uni-list">
			<block v-if="hasUserInfo === true">
				<view class="uni-list-cell" hover-class="uni-list-cell-hover">
					<view class="uni-list-cell-navigate uni-media-list ">
						<image class="uni-media-list-logo" :src="userInfo.avatarUrl"></image>
						<view class="uni-media-list-body">
							<view class="uni-media-list-text-top">{{userInfo.nickName}}</view>
							<view class="uni-media-list-text-bottom uni-ellipsis">vip</view>
						</view>
					</view>
				</view>
			</block>

			<view class="uni-list-cell" hover-class="uni-list-cell-hover">
				<view class="uni-list-cell-navigate uni-navigate-right">
					个人资料
					<text class="uni-badge uni-navigate-badge uni-badge-inverted">去填写</text>
				</view>
			</view>

			<view class="uni-list-cell" hover-class="uni-list-cell-hover">
				<view class="uni-list-cell-navigate uni-navigate-right">
					我的二维码
				</view>
			</view>

			<view class="uni-list-cell" hover-class="uni-list-cell-hover">
				<view class="uni-list-cell-navigate uni-navigate-right">
					我的地址
				</view>
			</view>

			<view class="uni-list-cell" hover-class="uni-list-cell-hover" @tap="clearStorage">
				<view class="uni-list-cell-navigate uni-navigate-right">
					清除缓存
				</view>
			</view>

			<navigator url="about" hover-class="other-navigator-hover">
				<view class="uni-list-cell" hover-class="uni-list-cell-hover">
					<view class="uni-list-cell-navigate">
						关于
						<text class="uni-badge uni-navigate-badge uni-badge-inverted">1.0.0</text>
					</view>
				</view>
			</navigator>
		</view>

		<view class="btn-row">
			<button v-if="!hasLogin" type="primary" class="primary" @tap="bindLogin">登录</button>
			<button v-if="hasLogin" type="default" @tap="bindLogout">退出登录</button>
		</view>

	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'

	export default {
		data() {
			return {
				hasUserInfo: false,
				userInfo: {
					avatarUrl: '../../static/my.png',
					nickName: '用户名',
				}
			}
		},
		computed: {
			...mapState(['hasLogin', 'forcedLogin']),

			// 或者使用下面的语法，允许重命名
			// 			...mapState({
			// 				forcedLogin: state => state.forcedLogin,
			// 				hasLogin: state => state.hasLogin,
			// 				userName: state => state.userName,
			// 			})
		},
		onShow: function () {
			if (!this.hasUserInfo) {
				uni.getUserInfo({
					provider: this.loginProvider,
					success: (e) => {
						console.log("得到用户信息", e);
						this.hasUserInfo = true;
						this.userInfo = e.userInfo
					},
					fail: (e) => {
						console.log("fail", e);
						let content = e.errMsg;
						if (~content.indexOf("uni.login")) {
							//content = "请在登录页面完成登录操作"
						}
					}
				});
			}
		},
		methods: {
			...mapMutations(['logout','clearStorage']),
			
			bindLogin() {
				uni.navigateTo({
					url: '../auth/login',
				});
			},
			
			bindLogout() {
				this.hasUserInfo = false;
				this.logout();
				/**
				 * 如果需要强制登录跳转回登录页面
				 */
				if (this.forcedLogin) {
					uni.reLaunch({
						url: '../auth/login',
					});
				}
			},

			clearStorage() {
				// this.$store.dispatch('clearStorage'); //清除缓存
				this.clearStorage(); //清除缓存
			}
		}
	}
</script>

<style>
	.btn-row {
		margin-top: 50px;
		padding: 20px;
	}
</style>
